<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>01 【基础语法与基本数据类型】 | Bin</title>
    <meta name="description" content="帝彬">
    <link rel="stylesheet" href="/assets/style.9f8bf5c4.css">
    <link rel="modulepreload" href="/assets/app.82d46cfc.js">
    <link rel="modulepreload" href="/assets/js_01.md.48c6f3a8.lean.js">
    <link rel="prefetch" href="/assets/chunks/VPAlgoliaSearchBox.6ebb7441.js">
    <link rel="icon" href="/logo.svg">
  <link rel="preload" href="/assets/inter-latin.7b37fe23.woff2" as="font" type="font/woff2" crossorigin="anonymous">
  <script>(()=>{const e=localStorage.getItem("vue-theme-appearance");(!e||e==="auto"?window.matchMedia("(prefers-color-scheme: dark)").matches:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="generator" content="qq1974892005">
  <link rel="icon" href="/images/logo.svg">
  <meta name="name" content="Bin">
  <script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js"></script>
  <script src="https://hm.baidu.com/hm.js?d186385b8ee12dbef7031da2e9c9eee3"></script>
  <script src="/public/tinymce/tinymce.js"></script>
  <meta name="twitter:title" content="01 【基础语法与基本数据类型】 | Bin">
  <meta property="og:title" content="01 【基础语法与基本数据类型】 | Bin">
  </head>
  <body>
    <div id="app"><div class="VPApp" data-v-23306c50><!--[--><span tabindex="-1" data-v-3785d3a7></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-3785d3a7> Skip to content </a><!--]--><!----><!--[--><div></div><!--]--><header class="VPNav nav-bar" data-v-23306c50 data-v-7d674ffc><div class="VPNavBar" data-v-7d674ffc data-v-96a69ce8><div class="container" data-v-96a69ce8><a class="VPNavBarTitle" href="/" data-v-96a69ce8 data-v-1f5e00a8><!--[--><img class="logo" src="/logo.svg" alt="bin" srcset="" data-v-1f5e00a8><span class="text" data-v-1f5e00a8>Bin</span><!--]--></a><div class="content" data-v-96a69ce8><!----><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-96a69ce8 data-v-9072bcde><span id="main-nav-aria-label" class="visually-hidden" data-v-9072bcde>Main Navigation</span><!--[--><!--[--><a class="vt-link link VPNavBarMenuLink" href="/yuanshen/" data-v-9072bcde data-v-6bdae1a3><!--[-->原神大地图<!--]--><!----></a><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">前端 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/js/01.html"><!--[-->JavaScript<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/ajax/01.html"><!--[-->ajax<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/ES6/01.html"><!--[-->ES6<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/echarts/01.html"><!--[-->echarts<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/typescript/01.html"><!--[-->typescript<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vue2/01.html"><!--[-->vue2<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/vue3/01.html"><!--[-->vue3<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/git/01.html"><!--[-->git<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">服务端 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/nodejs/01.html"><!--[-->nodejs<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/mysql/01.html"><!--[-->mysql<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/mongodb/01.html"><!--[-->mongodb<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">CSS提升 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/less/01.html"><!--[-->less<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/sass/01.html"><!--[-->sass<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/tailwindcss/01.html"><!--[-->tailwindcss<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">集合 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/jihe/React/"><!--[-->React<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/jihe/ReactNative/"><!--[-->ReactNative<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/jihe/vue/"><!--[-->Vue<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/jihe/vuex/"><!--[-->Vuex<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/jihe/vuerouter/"><!--[-->Vue-Router<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">参数 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/about/canshu.html"><!--[-->常用参数<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/about/dayin.html"><!--[-->打印机<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/about/chahuo.html"><!--[-->市场查货<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="https://sunlogin.oray.com/download" target="_blank" rel="noopener noreferrer"><!--[-->向日葵远程下载<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="vt-link-icon"><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--[--><div class="vt-flyout VPNavBarMenuGroup" data-v-9072bcde data-v-42573883><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false"><span class="vt-flyout-button-text">其他 <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-text-icon"><path d="M12,16c-0.3,0-0.5-0.1-0.7-0.3l-6-6c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l5.3,5.3l5.3-5.3c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-6,6C12.5,15.9,12.3,16,12,16z"></path></svg></span></button><div class="vt-flyout-menu"><div class="vt-menu"><div class="vt-menu-items"><!--[--><!--[--><a class="vt-link link vt-menu-link" href="/test/"><!--[-->日志<!--]--><!----></a><!--]--><!--[--><a class="vt-link link vt-menu-link" href="/test/muban.html"><!--[-->富文本模板<!--]--><!----></a><!--]--><!--]--></div><!--[--><!--]--></div></div></div><!--]--><!--]--></nav><div class="VPNavBarAppearance appearance" data-v-96a69ce8 data-v-d5f66188><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-d5f66188><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div><div class="vt-social-links VPNavBarSocialLinks social-links" data-v-96a69ce8 data-v-8b9a7f88><!--[--><a class="vt-social-link is-small" href="/translations/" title="languages" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " class="css-c4d79v"></path></svg><span class="visually-hidden">languages</span></a><a class="vt-social-link is-small" href="https://work.weixin.qq.com/kfid/kfc8e47e8eca8390e16" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><a class="vt-social-link is-small" href="mailto:dibinkf@vip.qq.com" title="slack" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path></svg><span class="visually-hidden">slack</span></a><a class="vt-social-link is-small" href="tencent://message/?uin=1974892005" title="discord" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden">discord</span></a><!--]--></div><div class="vt-flyout VPNavBarExtra extra" data-v-96a69ce8 data-v-b3e218c4><button type="button" class="vt-flyout-button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-flyout-button-icon"><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="vt-flyout-menu"><div class="vt-menu"><!----><!--[--><!--[--><div class="vt-menu-group" data-v-b3e218c4><div class="vt-menu-item item" data-v-b3e218c4><p class="vt-menu-label" data-v-b3e218c4>Appearance</p><div class="vt-menu-action action" data-v-b3e218c4><button class="vt-switch vt-switch-appearance" type="button" role="switch" aria-label="toggle dark mode" data-v-b3e218c4><span class="vt-switch-check"><span class="vt-switch-icon"><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-sun"><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-switch-appearance-moon"><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></div></div></div><div class="vt-menu-group" data-v-b3e218c4><div class="vt-menu-item item" data-v-b3e218c4><div class="vt-social-links social-links" data-v-b3e218c4><!--[--><a class="vt-social-link is-small" href="/translations/" title="languages" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M0 0h24v24H0z" fill="none"></path><path d=" M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z " class="css-c4d79v"></path></svg><span class="visually-hidden">languages</span></a><a class="vt-social-link is-small" href="https://work.weixin.qq.com/kfid/kfc8e47e8eca8390e16" title="github" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"></path></svg><span class="visually-hidden">github</span></a><a class="vt-social-link is-small" href="mailto:dibinkf@vip.qq.com" title="slack" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M5.042 15.165a2.528 2.528 0 0 1-2.52 2.523A2.528 2.528 0 0 1 0 15.165a2.527 2.527 0 0 1 2.522-2.52h2.52v2.52zM6.313 15.165a2.527 2.527 0 0 1 2.521-2.52 2.527 2.527 0 0 1 2.521 2.52v6.313A2.528 2.528 0 0 1 8.834 24a2.528 2.528 0 0 1-2.521-2.522v-6.313zM8.834 5.042a2.528 2.528 0 0 1-2.521-2.52A2.528 2.528 0 0 1 8.834 0a2.528 2.528 0 0 1 2.521 2.522v2.52H8.834zM8.834 6.313a2.528 2.528 0 0 1 2.521 2.521 2.528 2.528 0 0 1-2.521 2.521H2.522A2.528 2.528 0 0 1 0 8.834a2.528 2.528 0 0 1 2.522-2.521h6.312zM18.956 8.834a2.528 2.528 0 0 1 2.522-2.521A2.528 2.528 0 0 1 24 8.834a2.528 2.528 0 0 1-2.522 2.521h-2.522V8.834zM17.688 8.834a2.528 2.528 0 0 1-2.523 2.521 2.527 2.527 0 0 1-2.52-2.521V2.522A2.527 2.527 0 0 1 15.165 0a2.528 2.528 0 0 1 2.523 2.522v6.312zM15.165 18.956a2.528 2.528 0 0 1 2.523 2.522A2.528 2.528 0 0 1 15.165 24a2.527 2.527 0 0 1-2.52-2.522v-2.522h2.52zM15.165 17.688a2.527 2.527 0 0 1-2.52-2.523 2.526 2.526 0 0 1 2.52-2.52h6.313A2.527 2.527 0 0 1 24 15.165a2.528 2.528 0 0 1-2.522 2.523h-6.313z"></path></svg><span class="visually-hidden">slack</span></a><a class="vt-social-link is-small" href="tencent://message/?uin=1974892005" title="discord" target="_blank" rel="noopener noreferrer"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-social-link-icon"><path d="M20.222 0c1.406 0 2.54 1.137 2.607 2.475V24l-2.677-2.273-1.47-1.338-1.604-1.398.67 2.205H3.71c-1.402 0-2.54-1.065-2.54-2.476V2.48C1.17 1.142 2.31.003 3.715.003h16.5L20.222 0zm-6.118 5.683h-.03l-.202.2c2.073.6 3.076 1.537 3.076 1.537-1.336-.668-2.54-1.002-3.744-1.137-.87-.135-1.74-.064-2.475 0h-.2c-.47 0-1.47.2-2.81.735-.467.203-.735.336-.735.336s1.002-1.002 3.21-1.537l-.135-.135s-1.672-.064-3.477 1.27c0 0-1.805 3.144-1.805 7.02 0 0 1 1.74 3.743 1.806 0 0 .4-.533.805-1.002-1.54-.468-2.14-1.404-2.14-1.404s.134.066.335.2h.06c.03 0 .044.015.06.03v.006c.016.016.03.03.06.03.33.136.66.27.93.4.466.202 1.065.403 1.8.536.93.135 1.996.2 3.21 0 .6-.135 1.2-.267 1.8-.535.39-.2.87-.4 1.397-.737 0 0-.6.936-2.205 1.404.33.466.795 1 .795 1 2.744-.06 3.81-1.8 3.87-1.726 0-3.87-1.815-7.02-1.815-7.02-1.635-1.214-3.165-1.26-3.435-1.26l.056-.02zm.168 4.413c.703 0 1.27.6 1.27 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334.002-.74.573-1.338 1.27-1.338zm-4.543 0c.7 0 1.266.6 1.266 1.335 0 .74-.57 1.34-1.27 1.34-.7 0-1.27-.6-1.27-1.334 0-.74.57-1.338 1.27-1.338z"></path></svg><span class="visually-hidden">discord</span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><button type="button" class="vt-hamburger VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-96a69ce8 data-v-c78f86de><span class="vt-hamburger-container"><span class="vt-hamburger-top"></span><span class="vt-hamburger-middle"></span><span class="vt-hamburger-bottom"></span></span></button></div></div></div><!----></header><div class="VPLocalNav" data-v-23306c50 data-v-7cd5ed0a><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-7cd5ed0a><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-7cd5ed0a><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-7cd5ed0a>Menu</span></button><a class="top-link" href="#" data-v-7cd5ed0a>Return to top</a></div><aside class="VPSidebar" data-v-23306c50 data-v-22052bdb><nav id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-22052bdb><!--[--><!--]--><span id="sidebar-aria-label" class="visually-hidden" data-v-22052bdb>Sidebar Navigation</span><!--[--><div class="group" data-v-22052bdb><section class="VPSidebarGroup" data-v-22052bdb data-v-59eaa146><div class="title" data-v-59eaa146><h2 class="active title-text" data-v-59eaa146>JavaScript</h2></div><!--[--><a class="link active" href="/js/01.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>01 【基础语法与基本数据类型】</p></a><a class="link" href="/js/02.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>02 【JS表达式与操作符】</p></a><a class="link" href="/js/03.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>03 【流程控制语句】</p></a><a class="link" href="/js/04.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>04 【对象】</p></a><a class="link" href="/js/05.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>05 【函数（上）】</p></a><a class="link" href="/js/06.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>06 【函数（下）】</p></a><a class="link" href="/js/07.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>07 【数组及常用方法】</p></a><a class="link" href="/js/08.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>08 【标准库之Date对象】</p></a><a class="link" href="/js/09.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>10.Math对象</p></a><a class="link" href="/js/10.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>12.正则表达式</p></a><a class="link" href="/js/11.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>13.JSON 对象</p></a><a class="link" href="/js/12.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>15.错误处理机制</p></a><a class="link" href="/js/13.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>16.编程风格</p></a><a class="link" href="/js/14.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>17.console 对象与控制台</p></a><a class="link" href="/js/15.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>18.严格模式</p></a><a class="link" href="/js/16.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>19.DOM概述</p></a><a class="link" href="/js/17.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>20.Document 节点</p></a><a class="link" href="/js/18.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>21.节点的关系</p></a><a class="link" href="/js/19.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>22.节点的增删改查</p></a><a class="link" href="/js/20.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>节点集合</p></a><a class="link" href="/js/21.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>25.节点的属性</p></a><a class="link" href="/js/22.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>事件监听</p></a><a class="link" href="/js/23.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>事件对象与鼠标事件</p></a><a class="link" href="/js/24.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>键盘事件</p></a><a class="link" href="/js/25.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>进度事件和表单事件</p></a><a class="link" href="/js/26.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>触摸事件和其他常见事件</p></a><a class="link" href="/js/27.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>三大家族scroll、offset、client</p></a><a class="link" href="/js/28.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>事件传播</p></a><a class="link" href="/js/29.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>定时器和延时器</p></a><a class="link" href="/js/30.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>BOM是什么</p></a><a class="link" href="/js/31.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>window 对象</p></a><a class="link" href="/js/32.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>Navigator 对象和Screen 对象</p></a><a class="link" href="/js/33.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>History对象和Location对象</p></a><a class="link" href="/js/34.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>表单和FormData 对象</p></a><a class="link" href="/js/35.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>Storage接口</p></a><a class="link" href="/js/36.html" data-v-59eaa146 data-v-531573d4><p class="link-text" data-v-531573d4>节流和防抖</p></a><!--]--></section></div><!--]--><!--[--><!--]--></nav></aside><div id="VPContent" class="VPContent has-sidebar" data-v-23306c50 data-v-790151bc><div class="VPContentDoc has-aside has-sidebar" data-v-790151bc data-v-4fe9b7bd><div class="container" data-v-4fe9b7bd><div class="aside" data-v-4fe9b7bd><div class="aside-container" data-v-4fe9b7bd><!--[--><!--]--><div class="VPContentDocOutline" data-v-4fe9b7bd data-v-aa0e2252><div class="outline-marker" data-v-aa0e2252></div><div class="outline-title" data-v-aa0e2252>On this page</div><nav aria-labelledby="doc-outline-aria-label" data-v-aa0e2252><span id="doc-outline-aria-label" class="visually-hidden" data-v-aa0e2252>Table of Contents for current page</span><ul class="root" data-v-aa0e2252><!--[--><li style="" data-v-aa0e2252><a class="outline-link" href="#_1-基本使用" data-v-aa0e2252>1.基本使用</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_2-数据类型简介和检测" data-v-aa0e2252>2. 数据类型简介和检测</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_3-string（字符串）类型" data-v-aa0e2252>3.String（字符串）类型</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_4-number（数字）类型" data-v-aa0e2252>4.Number（数字）类型</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_5-boolean（布尔）类型" data-v-aa0e2252>5.Boolean（布尔）类型</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_6-null-类型" data-v-aa0e2252>6.Null 类型</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_7-undefined-类型" data-v-aa0e2252>7.Undefined 类型</a><!----></li><li style="" data-v-aa0e2252><a class="outline-link" href="#_8-类型转换" data-v-aa0e2252>8.类型转换</a><!----></li><!--]--></ul></nav></div><!--[--><!--[--><!--[--><div><a class="sponsors-aside-text" href="/">联系客服</a><img src="/images/qrcode.png"></div><!--]--><!--]--><!--]--><div class="VPCarbonAds" data-v-4fe9b7bd><img src="/logo.svg" alt="" srcset=""></div><!--[--><!--[--><!--[--><h1 class="tagline" data-v-3916b2f0><span class="accent" data-v-3916b2f0>Bin</span><br data-v-3916b2f0>QQ - 1974892005 </h1><!--]--><!--]--><!--]--></div></div><div class="content" data-v-4fe9b7bd><!--[--><!--]--><main data-v-4fe9b7bd><div style="position:relative;" class="vt-doc js" data-v-4fe9b7bd><div><h1 id="_01-【基础语法与基本数据类型】" tabindex="-1">01 【基础语法与基本数据类型】 <a class="header-anchor" href="#_01-【基础语法与基本数据类型】" aria-hidden="true">#</a></h1><table><thead><tr><th></th><th>语言</th><th>功能</th></tr></thead><tbody><tr><td>结构层</td><td>HTML</td><td>搭建结构、放置部件、描述语义</td></tr><tr><td>样式层</td><td>CSS</td><td>美化网页、实现布局</td></tr><tr><td>行为层</td><td>JavaScript</td><td>实现交互效果、数据收发、表单验证等</td></tr></tbody></table><p>1997 年，欧洲计算机制造商协会（ECMA）颁布了 JavaScript 的标准，命名为 ECMAScript。</p><blockquote><p>ECMAScript 简称 ES，JavaScript 简称 JS。</p></blockquote><ul><li><p>JavaScript 实现了 ECMAScript</p></li><li><p>ECMAScript 规范了 JavaScript</p></li></ul><p><strong>JavaScript 的语言风格和特性</strong></p><ul><li>类 C 语言风格，容易上手</li><li>弱类型（动态类型），简单易学</li><li>丰富的功能，无敌的生态，强大的性能</li></ul><h2 id="_1-基本使用" tabindex="-1">1.基本使用 <a class="header-anchor" href="#_1-基本使用" aria-hidden="true">#</a></h2><h3 id="_1-1-输出语句" tabindex="-1">1.1 输出语句 <a class="header-anchor" href="#_1-1-输出语句" aria-hidden="true">#</a></h3><div class="language-js line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">要输出的内容</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该语句会在浏览器窗口中弹出一个警告框</p><p>【功能】</p><p>在浏览器（JavaScript 引擎 例如：Chrome V8）解析到 JS 文件中的 alert() 语句时，便会中断 JS 脚本的执行，同时弹出警告框，直到用户单击确定后，才继续执行后续的 JS 脚本。</p><div class="language-js line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">write</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">要输出的内容</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>该内容将会被写到body标签中，并在页面中显示</p><div class="language-js line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">要输出的内容</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>console：控制台</p><p>log：记录、日志</p></blockquote><ul><li><code>console</code> 是 JS 的内置对象</li><li>通过对象 “打点” 可以调用其内部的 <code>log</code> 方法（所谓 “方法” 就是对象能够调用的函数）</li></ul><blockquote><p>F12 打开浏览器调试面板，点击 Console 控制台菜单。</p></blockquote><p>【功能】</p><p>在浏览器（JavaScript 引擎 例如：Chrome V8）解析到 JS 文件中的 console.log() 语句时，会直接在浏览器控制台输出语句，并自动继续执行后续的 JS 脚本。</p><blockquote><p><strong>输入语句</strong></p><ul><li><p>使用 <code>prompt()</code> 函数弹出浏览器输入框</p></li><li><p>由于 prompt() 函数输入的任何值都将默认为字符串</p></li></ul></blockquote><h3 id="_1-2-编写位置" tabindex="-1">1.2 编写位置 <a class="header-anchor" href="#_1-2-编写位置" aria-hidden="true">#</a></h3><ul><li>在 <code>&lt;body&gt;</code> 中的 <code>&lt;script&gt;</code> 标签中书写 JS 代码</li><li>将 JS 代码单独保存为 <code>.js</code> 文件，然后在 HTML 文件中使用 <code>&lt;script src=&quot;&quot;&gt;&lt;/script&gt;</code> 引入</li></ul><blockquote><p>JavaScript 不能脱离 HTML 网页运行！</p><p>（当然，今后学习 Node.js 后，JavaScript 可以独立成为一个运行平台）</p></blockquote><p>1.可以编写到标签的指定属性中</p><div class="language-html line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">onclick</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#82AAFF;">alert</span><span style="color:#C3E88D;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">hello</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">)</span><span style="color:#89DDFF;">;&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">我是按钮</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">button</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">href</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">javascript:alert(&#39;aaa&#39;);</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;">超链接</span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">a</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>2.可以编写到script标签中</p><div class="language-html line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 在 HTML5 之前，必须要加上 type 属性，并且里面的内容一定要正确！--&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    &lt;script type=&quot;text/javascript&quot;&gt;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    &lt;/script&gt; </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">    --&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 目前都是使用 HTML5，所以不用写 type 属性，默认就是 JS --&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#676E95;font-style:italic;">&lt;!-- 推荐把 script 文件写到 body 的末尾 --&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">    &lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 弹窗输出一句话</span></span>
<span class="line"><span style="color:#89DDFF;">        </span><span style="color:#676E95;font-style:italic;">// 每一句 JS 代码以分号结尾！</span></span>
<span class="line"><span style="color:#A6ACCD;">        </span><span style="color:#82AAFF;">alert</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你好，JavaScript！</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">    </span><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">body</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br></div></div><p>3.可以将代码编写到外部的js文件中，然后通过标签将其引入</p><p>script标签一旦用于引入外部文件了，就不能在编写代码了，即使编写了浏览器也会忽略 ,如果需要则可以在创建一个新的script标签用于编写内部代码</p><div class="language-html line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">text/javascript</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">文件路径</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">&gt;&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_1-3-基本语法" tabindex="-1">1.3 基本语法 <a class="header-anchor" href="#_1-3-基本语法" aria-hidden="true">#</a></h3><p>js函数声明不需要；分号，但是赋值语句要加；分号</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">function</span><span style="color:#A6ACCD;"> </span><span style="color:#82AAFF;">functionName</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">arg0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">arg1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">arg2</span><span style="color:#89DDFF;">){</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//函数声明  </span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> functionName</span><span style="color:#89DDFF;">=</span><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;">arg0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">arg1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;">arg2</span><span style="color:#89DDFF;">){</span><span style="color:#F07178;">  </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//函数表达式  </span></span>
<span class="line"><span style="color:#89DDFF;">};</span><span style="color:#A6ACCD;">(注意分号)  </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>注释</p><p>单行注释</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">//注释内容  </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>多行注释</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">/*  </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">注释内容  </span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">*/</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>JS严格区分大小写</p><p>JS中每条语句以分号(;)结尾如果不写分号，浏览器会自动添加，但是会消耗一些系统资源， 而且有些时候，浏览器会加错分号，所以在开发中分号必须写</p><p>JS中会自动忽略多个空格和换行，所以我们可以利用空格和换行对代码进行格式化。</p><h3 id="_1-4-字面量-值-和变量" tabindex="-1">1.4 字面量(值)和变量 <a class="header-anchor" href="#_1-4-字面量-值-和变量" aria-hidden="true">#</a></h3><p><strong>字面量</strong></p><p>字面量实际上就是一些固定的值，比如 1 2 3 4 true false null NaN &quot;hello&quot;<br><strong>字面量都是不可以改变的。</strong></p><p>由于字面量不是很方便使用，所以在JS中很少直接使用字面量</p><p><strong>变量</strong></p><p>变量可以用来保存字面量，并且可以保存任意的字面量</p><p>一般都是通过变量来使用字面量，而不直接使用字面量，而且也可以通过变量来对字面量进行一个描述</p><p><strong>声明变量</strong></p><p>使用var关键字来声明一个变量</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>为变量赋值</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>声明和赋值同时进行</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">456</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">   </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_1-5-标识符" tabindex="-1">1.5 标识符 <a class="header-anchor" href="#_1-5-标识符" aria-hidden="true">#</a></h3><p>在JS中所有的可以自主命名的内容，都可以认为是一个标识符，<br> 是标识符就应该遵守标识符的规范。</p><blockquote><p>函数、类名、对象的属性等也都要遵守这个标识符的命名规则。</p></blockquote><h3 id="_1-6-推荐的变量命名风格" tabindex="-1">1.6 推荐的变量命名风格 <a class="header-anchor" href="#_1-6-推荐的变量命名风格" aria-hidden="true">#</a></h3><ul><li>小驼峰命名法：<code>mathTestScore</code> （吐血推荐）</li><li>C 风格变量命名法：<code>math_test_score</code></li></ul><blockquote><p>补充：</p><ul><li>驼峰命名法：Java、JavaScript</li><li>下划线命名法：C、C++、Python、Golang、SQL</li></ul></blockquote><h3 id="_1-7-变量的默认值" tabindex="-1">1.7 变量的默认值 <a class="header-anchor" href="#_1-7-变量的默认值" aria-hidden="true">#</a></h3><ul><li>一个变量只定义，但没有赋初值，默认值是 <code>undefined</code>（未阐明）</li><li>一个变量只有被 <code>var</code> 定义，并赋初值之后，才算正式初始化完成</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 只定义但没有赋初值</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">24</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 24</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><h3 id="_1-8-变量的常见错误" tabindex="-1">1.8 变量的常见错误 <a class="header-anchor" href="#_1-8-变量的常见错误" aria-hidden="true">#</a></h3><ul><li>不用 <code>var</code> 定义，而直接将值赋予它，虽然不引发报错，但会产生作用域问题。</li></ul><blockquote><p>请一律加上 <code>var</code> ！</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">24</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 未使用 var 定义的变量默认为全局变量！成为 window 对象的属性。</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 24</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 24</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(window</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p>关于作用域的问题，后期课程会介绍。</p></blockquote><ul><li>尝试使用一个既没有被 <code>var</code> 定义过，也没有赋过值的变量，就会产生引用错误。</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(c)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// index.js:1 Uncaught ReferenceError: c is not defined at index.js:1</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p><strong>使用 strict 严格模式</strong></p><p>JavaScript 在设计之初，为了方便初学者学习，并不强制要求用 <code>var</code> 申明变量。这个设计错误带来了严重的后果：如果一个变量没有通过 <code>var</code> 申明就被使用，那么该变量就自动被申明为全局变量：</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">i </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// i 现在是全局变量</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>在同一个 HTML 页面的不同的 JavaScript 文件中，如果都不用 <code>var</code> 申明，恰好都使用了变量 <code>i</code>，将造成变量 <code>i</code> 互相影响，产生难以调试的错误结果。</p><p>使用 <code>var</code> 申明的变量则不是全局变量，它的范围被限制在该变量被申明的 JS 文件或函数体内（函数的概念将稍后讲解），同名变量在不同的函数体内互不冲突。</p><p>为了修补 JavaScript 这一严重设计缺陷，ECMA 在后续规范中推出了 strict 模式，在 strict 模式下运行的 JavaScript 代码，强制通过 <code>var</code> 申明变量，未使用 <code>var</code> 申明变量就使用的，将导致运行错误。</p><p>启用 strict 模式的方法是在 JavaScript 代码的第一行写上：</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">use strict</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>这是一个字符串，不支持 strict 模式的浏览器会把它当做一个字符串语句执行，支持 strict 模式的浏览器将开启 strict 模式运行 JavaScript。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">use strict</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">abc </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">Hello, world</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(abc)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 如果浏览器支持 strict 模式，</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 下面的代码将报 ReferenceError 错误：Uncaught ReferenceError: abc is not defined</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><p>不用 <code>var</code> 申明的变量会被视为全局变量，为了避免这一缺陷，所有的 JavaScript 代码都推荐使用 strict 模式。</p><p>提示：<code>&quot;use strict&quot;</code>语句可以放在 JS 代码的任意一行上，并且它只对它所在作用域下方的代码起作用。</p></blockquote><h3 id="_1-9-等号表示赋值" tabindex="-1">1.9 等号表示赋值 <a class="header-anchor" href="#_1-9-等号表示赋值" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 11</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 10</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_1-10-同时声明多个变量" tabindex="-1">1.10 同时声明多个变量 <a class="header-anchor" href="#_1-10-同时声明多个变量" aria-hidden="true">#</a></h3><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> b </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> c </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 建议每行只声明一个变量</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_1-11-变量声明提升" tabindex="-1">1.11 变量声明提升 <a class="header-anchor" href="#_1-11-变量声明提升" aria-hidden="true">#</a></h3><ul><li>变量声明的提升：可以提前使用一个稍后才声明的变量，而不会引发异常</li><li>在执行所有代码前，JS 有预解析阶段，会预读所有变量的声明（不会提升赋值，只会提升定义）</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#676E95;font-style:italic;">// 变量声明提升的只是定义，不提升赋值！！！</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 先使用变量</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 后定义变量</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 10</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p>实际的情况相当于：</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">10</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// 10</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><p>【注意事项】</p><ul><li>变量声明提升是 JS 的独有特性！</li><li>在实际开发中，不要刻意使用变量提升的特性，一定要先定义再使用！</li><li>严格模式对变量提升没有检测作用（严格模式也搞不定变量提升这个老赖）！</li></ul><h3 id="_1-12-学会处理报错" tabindex="-1">1.12 学会处理报错 <a class="header-anchor" href="#_1-12-学会处理报错" aria-hidden="true">#</a></h3><blockquote><p>JS 一但发生语句错误，那么后续的语句也就不执行了！</p><p>浏览器控制台会检测错误的类型及行号（行号不一定正确，但可以确定范围）</p><p>现代 IDE 一般具备智能自动检查功能，最智能的 JavaScript IDE：WebStorm</p></blockquote><ul><li><code>Uncaught SyntaxError: Invalid or unexpected token</code></li></ul><p>未捕获的语法错误：不合法或错误的符号。</p><p>（中文符号错误、……）</p><ul><li><code>Uncaught ReferenceError: jerry is not defined</code></li></ul><p>未捕获的引用错误：jerry 没有被定义。</p><p>（字符串没有加引号、名称拼写错误、……）</p><h2 id="_2-数据类型简介和检测" tabindex="-1">2. 数据类型简介和检测 <a class="header-anchor" href="#_2-数据类型简介和检测" aria-hidden="true">#</a></h2><h3 id="_2-1-javascript-中两大数据类型" tabindex="-1">2.1 JavaScript 中两大数据类型 <a class="header-anchor" href="#_2-1-javascript-中两大数据类型" aria-hidden="true">#</a></h3><p><strong>（1）基本数据类型</strong></p><blockquote><p>JS 没有字符型，JS 的 String 是基本类型！</p></blockquote><ul><li>Number</li><li>String</li><li>Boolean</li><li>Undefined</li><li>Null</li></ul><p><strong>（2）复杂数据类型</strong></p><ul><li>Object</li><li>Array</li><li>Function</li><li>RegExp（正则表达式）</li><li>Date</li><li>Map</li><li>Set</li><li>Symbol</li><li>……</li></ul><h3 id="_2-2-typeof-运算符" tabindex="-1">2.2 typeof 运算符 <a class="header-anchor" href="#_2-2-typeof-运算符" aria-hidden="true">#</a></h3><p>使用 <code>typeof</code> 运算符可以检测值或者变量的类型。 语法：typeof 变量<br> 它会返回一个用于描述类型的字符串作为结果</p><blockquote><p>typeof 是一个运算符，而不是内置函数，所以不用加 <code>()</code>，如果加了也不会报错，但是并不推荐。</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  </span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ds</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>利用浏览器控制台进行交互测试。</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ds</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">5</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> a)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><img src="https://i0.hdslb.com/bfs/album/2e079e848204b3ae7068cd11e3e6aa8481f32a4c.png" style="zoom:67%;"><blockquote><p>从以上测试也可以看出，JS 是一个弱类型的语言，变量值是什么类型，那么变量就是什么类型，而不用显式地指出类型。</p></blockquote><h3 id="_2-3-5种基本类型的-typeof-结果" tabindex="-1">2.3 5种基本类型的 typeof 结果 <a class="header-anchor" href="#_2-3-5种基本类型的-typeof-结果" aria-hidden="true">#</a></h3><table><thead><tr><th>类型名</th><th>typeof 检测结果</th><th>值举例</th></tr></thead><tbody><tr><td>数字类型</td><td>number</td><td><code>5</code>、<code>2.5</code></td></tr><tr><td>字符串类型</td><td>string</td><td><code>&#39;慕课网&#39;</code></td></tr><tr><td>布尔类型</td><td>boolean</td><td><code>true</code>、<code>false</code></td></tr><tr><td>undefined 类型</td><td>undefined</td><td><code>undefined</code></td></tr><tr><td>null 类型</td><td>object（可以理解为空对象）</td><td><code>null</code></td></tr></tbody></table><h3 id="_2-4-复杂数据类型简介" tabindex="-1">2.4 复杂数据类型简介 <a class="header-anchor" href="#_2-4-复杂数据类型简介" aria-hidden="true">#</a></h3><p>除基本类型值外，JS 的世界中还有复杂数据类型。</p><p>举例：</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">[</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;">]</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">{</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">a</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">b</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#F78C6C;">2</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">function</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><blockquote><p>在 JS 中普通类型也可以包装为复杂类型（对象）</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">str01 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zjr</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">str02 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">new</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zjr</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">str03 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">zjr</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> str01)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> str02)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// object</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> str03)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(str01 </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> str02)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(str02 </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> str03)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(str01 </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> str03)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// Number、Boolean 同理</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div></blockquote><p>复杂数据类型都是 “引用类型”（type: object），将在后续课程中介绍。</p><h2 id="_3-string（字符串）类型" tabindex="-1">3.String（字符串）类型 <a class="header-anchor" href="#_3-string（字符串）类型" aria-hidden="true">#</a></h2><h3 id="_3-1-字符串的表示" tabindex="-1">3.1 字符串的表示 <a class="header-anchor" href="#_3-1-字符串的表示" aria-hidden="true">#</a></h3><p>字符串要用引号包裹，双引号或者单引号均可。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ds</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">ds</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>数字 <code>10</code> 和字符串 <code>&quot;10&quot;</code> 在语义上是不同的，前者表示一个数量，后者是一个文本。</p><h3 id="_3-2-字符串的拼接" tabindex="-1">3.2 字符串的拼接 <a class="header-anchor" href="#_3-2-字符串的拼接" aria-hidden="true">#</a></h3><p>加号可以用来拼接多个字符串。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">d</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">s</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;ds&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">d</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">ef</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;abcdef&quot;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h3 id="_3-3-字符串和变量的拼接" tabindex="-1">3.3 字符串和变量的拼接 <a class="header-anchor" href="#_3-3-字符串和变量的拼接" aria-hidden="true">#</a></h3><p>要将一个变量的值 “插入” 到字符串中，要满足变量左右两边至少有一边 + 字符串。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> year </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">2022</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> str </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">北京冬奥会在</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> year </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">年召开</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;北京冬奥会在2022年召开&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">24</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> str1 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">54</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// 78</span></span>
<span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> str2 </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">54</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> a</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;5424&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">10</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// &quot;110&quot;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">2</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;2&quot;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br></div></div><blockquote><p>ES6 中增加了反引号 ( ` ) 表示法，可以更方便进行变量插值，后续课程将进行介绍。</p></blockquote><h3 id="_3-4-空字符串" tabindex="-1">3.4 空字符串 <a class="header-anchor" href="#_3-4-空字符串" aria-hidden="true">#</a></h3><p>一些时候需要使用空字符串，直接书写闭合的引号对即可。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> str </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p>空字符串可以用于将变量变为字符串！</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#C792EA;">var</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">24</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"><span style="color:#A6ACCD;">a </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> a </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;24&quot;</span></span>
<span class="line"><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> a)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// string</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h3 id="_3-5-字符串的-length-属性" tabindex="-1">3.5 字符串的 length 属性 <a class="header-anchor" href="#_3-5-字符串的-length-属性" aria-hidden="true">#</a></h3><blockquote><p>通过对 String 类型 “打点” 的方式，可以调用其内置属性。</p><blockquote><p>注意：在 JS 中，String 是基本类型，之所以 String 可以 “打点” 调用属性和方法，那是因为 JS 的解释器会自动将基本类型包装成对应的对象类型。</p></blockquote></blockquote><p>字符串的 length 属性表示字符串的长度。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我喜欢JS</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 5</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我喜欢JS，我也喜欢NODE</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 14</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;&quot;</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">length</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_3-6-转义字符" tabindex="-1">3.6 转义字符 <a class="header-anchor" href="#_3-6-转义字符" aria-hidden="true">#</a></h3><p>在字符串中使用\作为转义字符</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">\</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">  ==&gt; </span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">\</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">  ==&gt; </span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;">  </span></span>
<span class="line"><span style="color:#A6ACCD;">\n  </span><span style="color:#89DDFF;">==&gt;</span><span style="color:#A6ACCD;"> 换行  </span></span>
<span class="line"><span style="color:#A6ACCD;">\t  </span><span style="color:#89DDFF;">==&gt;</span><span style="color:#A6ACCD;"> 制表符  </span></span>
<span class="line"><span style="color:#A6ACCD;">\\  </span><span style="color:#89DDFF;">==&gt;</span><span style="color:#A6ACCD;"> \	  </span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><h2 id="_4-number（数字）类型" tabindex="-1">4.Number（数字）类型 <a class="header-anchor" href="#_4-number（数字）类型" aria-hidden="true">#</a></h2><h3 id="_4-1-一切数都是数字类型" tabindex="-1">4.1 一切数都是数字类型 <a class="header-anchor" href="#_4-1-一切数都是数字类型" aria-hidden="true">#</a></h3><p>在 JS 中，所有数字不分大小、不分整浮、不分正负，都是数字类型。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">925</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0.5</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">24</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><h3 id="_4-2-小数中-0-可以省略" tabindex="-1">4.2 小数中 0 可以省略 <a class="header-anchor" href="#_4-2-小数中-0-可以省略" aria-hidden="true">#</a></h3><p>在表达小数的时候，整数个位的 <code>0</code> 可以省略。</p><img src="https://i0.hdslb.com/bfs/album/8c8898e00789ea7db9319a50d9593aedfe557c65.png" style="zoom:67%;"><h3 id="_4-3-科学计数法" tabindex="-1">4.3 科学计数法 <a class="header-anchor" href="#_4-3-科学计数法" aria-hidden="true">#</a></h3><p>较大数或较小数（绝对值较小）可以写成科学计数法。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">3e8</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 300000000</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3e8</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"></span>
<span class="line"><span style="color:#F78C6C;">3e-4</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 0.0003</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3e-4</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><img src="https://i0.hdslb.com/bfs/album/53ff0caa23bc80ef5edf4ff89fe7fe77c74ef317.png" style="zoom:50%;"><h3 id="_4-4-不同进制的数字" tabindex="-1">4.4 不同进制的数字 <a class="header-anchor" href="#_4-4-不同进制的数字" aria-hidden="true">#</a></h3><p><strong>（1）二进制数值以 <code>0b</code> 开头</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">0b10</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 2</span></span>
<span class="line"><span style="color:#F78C6C;">0b1111</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 15</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>（2）八进制数值以 <code>0</code> 开头</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">017</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 15</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><p><strong>（3）十六进制数值以 <code>0x</code> 开头</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">0xf</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 15</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><h3 id="_4-5-一个特殊的数字型值-nan" tabindex="-1">4.5 一个特殊的数字型值 NaN <a class="header-anchor" href="#_4-5-一个特殊的数字型值-nan" aria-hidden="true">#</a></h3><p><code>NaN</code> 是 “not a number” 的意思，即 “不是一个数”，但它是一个数字类型的值。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">NaN;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// number</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>0 除以 0 的结果是 NaN，事实上，在数学运算中，若结果不能得到数字，其结果往往都是 NaN</li><li>NaN 有一个 “奇怪” 的性质：不自等（这个知识点将在后续课程中讲解）</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 2</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">-</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">/</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">我</span><span style="color:#89DDFF;">&quot;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">+</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">你</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &quot;我你&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">NaN</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">NaN;</span><span style="color:#A6ACCD;">   </span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br></div></div><blockquote><p>再次强调：NaN 是一个值（特殊的值），不是类型。</p><p>唯一能判断 <code>NaN</code> 的方法是通过 <code>isNaN()</code> 函数：</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">isNaN</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">NaN</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div></blockquote><h2 id="_5-boolean（布尔）类型" tabindex="-1">5.Boolean（布尔）类型 <a class="header-anchor" href="#_5-boolean（布尔）类型" aria-hidden="true">#</a></h2><p>在计算机领域，几乎所有的 “真” 和 “假” 都归为布尔类型值。</p><p>布尔类型值只有两个：<code>true</code> 和 <code>false</code>，分别表示 <code>真</code> 和 <code>假</code>。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// boolean</span></span>
<span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// boolean</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><blockquote><p>布尔类型在 关系运算 和 逻辑运算 中广泛运用。</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#F78C6C;">3</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">5</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	 </span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">3</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> 	 </span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#F78C6C;">5</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&gt;=</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><blockquote><p>注意：在 JS 中，1 可以 “代表” true，0或-0 可以 “代表” false，原理是类型的自动转换，但非常不建议以数字来代替布尔值！</p></blockquote><h2 id="_6-null-类型" tabindex="-1">6.Null 类型 <a class="header-anchor" href="#_6-null-类型" aria-hidden="true">#</a></h2><p><code>null</code> 表示 “空”，可以理解为它是 “空对象”。</p><p>当我们需要将对象销毁、数组销毁或者删除事件监听时，通常将它们设置为 null。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;">box</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">onclick </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null;</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 删除点击事件</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p>用 typeof 检测 null 结果为 <code>object</code>。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">null;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// object</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>狭义上，null 可以理解为 “空对象”，这样可以合理的解释为什么 null 的类型为 object。</p><p>但是准确的来说，null 不是一个 “对象”，它是一个独立的 “基本数据类型”。</p></blockquote><h2 id="_7-undefined-类型" tabindex="-1">7.Undefined 类型 <a class="header-anchor" href="#_7-undefined-类型" aria-hidden="true">#</a></h2><p>一个没有赋值的变量的默认值是 <code>undefined</code>，而 undefined 的类型也是 undefined。</p><p>即：undefined 既是类型，又是值（且这种类型只有它自身一个值）。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#89DDFF;">typeof</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// undefined</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><blockquote><p>实际开发中，一般不会给某个变量赋值为 undefined，但是我们会检查一个变量的值是否为 undefined。</p></blockquote><blockquote><p>在变量声明提升的时候，会出现 undefined，要注意！</p></blockquote><div class="language-js line-numbers-mode"><pre><code><span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">==</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">true</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">*</span><span style="color:#A6ACCD;">	</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">===</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;"> </span><span style="color:#FF9CAC;">false</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><h2 id="_8-类型转换" tabindex="-1">8.类型转换 <a class="header-anchor" href="#_8-类型转换" aria-hidden="true">#</a></h2><h3 id="_8-1转成string" tabindex="-1">8.1转成String <a class="header-anchor" href="#_8-1转成string" aria-hidden="true">#</a></h3><p><code>String()</code>和<code>toString()</code>除了对于null和undefined的处理方式不一样，其它一样</p><p><strong>使用 String() 函数</strong></p><p><code>String()</code> 函数是 JS 内置函数。</p><blockquote><p>由于 String() 属于内置构造函数，所以 String() 的首字母 S 要大写。</p></blockquote><p><strong>（1）数字——&gt;字符串</strong></p><p>变为 “长得相同” 的字符串。</p><p>科学计数法和非 10 进制数字会转为 10 进制的标准值。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;123&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">123.4</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;123.4&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">2e3</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;2000&#39;</span></span>
<span class="line"><span style="color:#82AAFF;">Stiing</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">NaN</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;NaN&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">Infinity</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &#39;Infinity&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0xf</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;15&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br></div></div><p><strong>（2）布尔值——&gt;字符串</strong></p><p>变为 “长得相同” 的字符串。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;true&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;false&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>（3）undefined 和 null——&gt;字符串</strong></p><p>变为 “长得相同” 的字符串。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// &#39;undefined&#39;</span></span>
<span class="line"><span style="color:#FFCB6B;">String</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// &#39;null&#39;</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>使用 toString() 方法</strong></p><p><code>toString()</code> 是几乎所有值都有的方法，功能是将值转为字符串。</p><blockquote><p>纯数字不能直接 “打点” 调用 toString() 方法，要把纯数字用 <code>()</code> 包裹起来，此时 JS 会提升该数字为一个对象（包装为对象）。</p></blockquote><img src="https://i0.hdslb.com/bfs/album/08e295e8d3669b4fc296efa739a13590b1596a1e.png" style="zoom:50%;"><blockquote><p>toString() 方法依旧是返回一个字符串，并不改变变量原有的类型！</p></blockquote><img src="https://i0.hdslb.com/bfs/album/6ed5868ac15b20c3bc0230114635ef95c49ebff4.png" style="zoom:50%;"><h3 id="_8-2-转成number" tabindex="-1">8.2 转成Number <a class="header-anchor" href="#_8-2-转成number" aria-hidden="true">#</a></h3><p><strong>使用 Number() 函数</strong></p><p><code>Number()</code> 函数是 JS 内置函数。</p><blockquote><p>由于 Number() 属于内置构造函数，所以 Number() 的首字母 N 要大写。</p></blockquote><p><strong>（1）字符串——&gt;数字</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			 </span><span style="color:#676E95;font-style:italic;">// 123</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123.45</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		 </span><span style="color:#676E95;font-style:italic;">// 123.45</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-123</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			 </span><span style="color:#676E95;font-style:italic;">// -123</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-123.45</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		 </span><span style="color:#676E95;font-style:italic;">// -123.45</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 字符串中不支持有非数值字符</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">123年</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	    	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">2e3</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 2000</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">				</span><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 字符串不支持是数学表达式</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">1+1</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 除了字符串外，还可以直接放一个表达式</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">1</span><span style="color:#89DDFF;">+</span><span style="color:#F78C6C;">1</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 2</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br></div></div><p><strong>（2）布尔值——&gt;数字</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 1</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>（3）undefined和null——&gt;数字</strong></p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#FFCB6B;">Number</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 0</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><p><strong>使用 parseInt() 函数</strong></p><p><code>parseInt()</code> 函数的功能是将 <code>字符串</code> 或 <code>浮点数</code> 转为 <code>整数</code>。</p><ul><li>自动截掉第一个非数字字符之后的所有字符</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.14</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  </span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-3.14</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  </span><span style="color:#676E95;font-style:italic;">// -3</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3瓜皮.14</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3.14</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  	  </span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-</span><span style="color:#F78C6C;">3.14</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  </span><span style="color:#676E95;font-style:italic;">// -3</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><ul><li>所有文字都将被截掉</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.14是圆周率</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>如果字符串以非数字开头，则转为 NaN</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">圆周率是3.14</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">一二三</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		 </span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div><ul><li>不存在 “四舍五入”</li></ul><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.99</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		  </span><span style="color:#676E95;font-style:italic;">// 3</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br></div></div><ul><li>true、false、undefined、null 转为 NaN</li></ul><blockquote><p>之所以会出现这种情况的原因是，parseInt() 的原理是，先将参数转换为字符串，再将字符串转为整数。</p><p>所以，true 等会先被转为 <code>&#39;true&#39;</code>。</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">true</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#FF9CAC;">false</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// NaN	</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// NaN</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><blockquote><p>parseInt() 函数的特性会用于处理数字的净化。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseInt</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">24px</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">	</span><span style="color:#676E95;font-style:italic;">// 24</span></span>
<span class="line"><span style="color:#676E95;font-style:italic;">// 去除了单位，保留数值！</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></blockquote><p><strong>使用 parseFloat() 函数</strong></p><p><code>parseFloat()</code> 函数的功能是将字符串转为浮点数。</p><blockquote><p>绝大部分原理与 parseInt() 类似。</p></blockquote><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.14</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// 3.14</span></span>
<span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3.14</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// 3.14</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.14是圆周率</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// 3.14</span></span>
<span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.14.15</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		   </span><span style="color:#676E95;font-style:italic;">// 3.14</span></span>
<span class="line"></span>
<span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">3.99</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// 3.99</span></span>
<span class="line"><span style="color:#82AAFF;">parseFloat</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">-3.99</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// -3.99</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br></div></div><h3 id="_8-3-其他值——-布尔值" tabindex="-1">8.3 其他值——&gt;布尔值 <a class="header-anchor" href="#_8-3-其他值——-布尔值" aria-hidden="true">#</a></h3><p><code>Boolean()</code> 函数是 JS 内置函数。</p><blockquote><p>由于 Boolean() 属于内置构造函数，所以 Boolean() 的首字母 B 要大写。</p></blockquote><p><strong>（1）数字——&gt;布尔值</strong></p><p>0 和 NaN 转为 <code>false</code>，其他数字都转为 <code>true</code>。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">123</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">0</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">				</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">NaN</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">Infinity</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">-Infinity</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">		</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br></div></div><blockquote><p>Infinity 属性用于存放表示正无穷大的数值。</p></blockquote><p><strong>（2）字符串——&gt;布尔值</strong></p><p>空字符串变为 <code>false</code>，其他都转为 <code>true</code>。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">				</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">abc</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">				</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">false</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">			</span><span style="color:#676E95;font-style:italic;">// true</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p><strong>（3）undefined和null——&gt;布尔值</strong></p><p>转为 false。</p><div class="language-javascript line-numbers-mode"><pre><code><span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">undefined</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">				</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"><span style="color:#FFCB6B;">Boolean</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">null</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;">					</span><span style="color:#676E95;font-style:italic;">// false</span></span>
<span class="line"></span></code></pre><div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br></div></div></div></div><!----></main><!--[--><!--]--><footer class="VPContentDocFooter" data-v-4fe9b7bd data-v-7f892bef><!----><a class="next-link" href="/js/02.html" data-v-7f892bef><span class="desc" data-v-7f892bef>Next <svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="vt-link-icon" data-v-7f892bef><path d="M9,19c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l5.3-5.3L8.3,6.7c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l6,6c0.4,0.4,0.4,1,0,1.4l-6,6C9.5,18.9,9.3,19,9,19z"></path></svg></span><span class="title" data-v-7f892bef>02 【JS表达式与操作符】</span></a></footer></div></div></div></div><div class="visually-hidden" aria-live="polite" data-v-23306c50>01 【基础语法与基本数据类型】 has loaded</div></div></div>
    <script>__VP_HASH_MAP__ = JSON.parse("{\"about_canshu.md\":\"5cbc0865\",\"about_chahuo.md\":\"4437b8d9\",\"about_dayin.md\":\"34b5b775\",\"ajax_01.md\":\"2bc3ac36\",\"ajax_02.md\":\"2b66aa43\",\"echarts_01.md\":\"8784be9b\",\"echarts_02.md\":\"3e6ecdea\",\"echarts_03.md\":\"28ca81f0\",\"echarts_04.md\":\"d02d74fb\",\"echarts_05.md\":\"f150b054\",\"es6_01.md\":\"53b72f76\",\"es6_02.md\":\"1fc3a71b\",\"es6_03.md\":\"2b8d77d0\",\"es6_04.md\":\"19f87206\",\"es6_05.md\":\"78caf034\",\"es6_06.md\":\"f8d3c991\",\"es6_07.md\":\"324f9949\",\"es6_08.md\":\"87411498\",\"es6_09.md\":\"3486bc74\",\"es6_10.md\":\"71a60a12\",\"es6_11.md\":\"6d589e6c\",\"es6_12.md\":\"d82e096b\",\"es6_13.md\":\"78856900\",\"es6_14.md\":\"40c129d1\",\"git_01.md\":\"bf73bb28\",\"git_02.md\":\"650fa8d0\",\"git_03.md\":\"4384f718\",\"git_04.md\":\"14478c6d\",\"index.md\":\"09348a64\",\"jihe_react_index.md\":\"f57878ae\",\"jihe_reactnative_index.md\":\"c7e0faf3\",\"jihe_vue_index.md\":\"990e53d2\",\"jihe_vuerouter_index.md\":\"d28167d1\",\"jihe_vuex_index.md\":\"b9d762ab\",\"js_01.md\":\"48c6f3a8\",\"js_02.md\":\"a5183efb\",\"js_03.md\":\"5a8ce924\",\"js_04.md\":\"3db3e706\",\"js_05.md\":\"7b8951d8\",\"js_06.md\":\"dc3d579a\",\"js_07.md\":\"e7a4eda3\",\"js_08.md\":\"f75c92a3\",\"js_09.md\":\"80e86e46\",\"js_10.md\":\"646ac118\",\"js_11.md\":\"7d754050\",\"js_12.md\":\"7e6eae06\",\"js_13.md\":\"947200bc\",\"js_14.md\":\"1c0566af\",\"js_15.md\":\"d465d165\",\"js_16.md\":\"1c7c9370\",\"js_17.md\":\"71dec812\",\"js_18.md\":\"d68348c2\",\"js_19.md\":\"72c34e28\",\"js_20.md\":\"ff30fdd3\",\"js_21.md\":\"aa9bea2b\",\"js_22.md\":\"6bc45920\",\"js_23.md\":\"3131d6e6\",\"js_24.md\":\"5f12ad69\",\"js_25.md\":\"c5932cf5\",\"js_26.md\":\"b8e719df\",\"js_27.md\":\"6679728d\",\"js_28.md\":\"c9ec23e0\",\"js_29.md\":\"09376a4e\",\"js_30.md\":\"dbc798cb\",\"js_31.md\":\"283dae59\",\"js_32.md\":\"11d6ad8d\",\"js_33.md\":\"e4232cd9\",\"js_34.md\":\"a3b52a45\",\"js_35.md\":\"1477beb5\",\"js_36.md\":\"01702bb7\",\"keshitong_caigou.md\":\"c5f9edad\",\"keshitong_caiwu.md\":\"90dbd259\",\"keshitong_index.md\":\"7522f84e\",\"keshitong_xiaoshou.md\":\"b4d67695\",\"keshitong_xunjia.md\":\"49b056fe\",\"less_01.md\":\"cc6e26b8\",\"linux_01.md\":\"40a56533\",\"linux_02.md\":\"fa080f7e\",\"linux_03.md\":\"9c723c17\",\"linux_04.md\":\"c4b01f09\",\"linux_05.md\":\"cfe63746\",\"linux_06.md\":\"4e05c7c6\",\"linux_07.md\":\"2dbdda0c\",\"linux_08.md\":\"80f78478\",\"linux_09.md\":\"b9157005\",\"linux_10.md\":\"55e60bfe\",\"linux_11.md\":\"3b59a057\",\"mongodb_01.md\":\"4e9aab55\",\"mysql_01.md\":\"66f81032\",\"mysql_02.md\":\"38ff9d8a\",\"mysql_03.md\":\"4a1047e3\",\"mysql_04.md\":\"ed6dc0f6\",\"mysql_05.md\":\"fb50b511\",\"mysql_06.md\":\"4f4b1170\",\"mysql_07.md\":\"3f58b4d2\",\"mysql_08.md\":\"7e23f325\",\"mysql_09.md\":\"bef84df5\",\"mysql_10.md\":\"33e4e499\",\"mysql_11.md\":\"4e732a7d\",\"nodejs_01.md\":\"614d43a3\",\"nodejs_02.md\":\"4899f883\",\"nodejs_03.md\":\"f47d5f16\",\"nodejs_04.md\":\"7755e031\",\"nodejs_05.md\":\"ef947c59\",\"nodejs_06.md\":\"ab0a9b5a\",\"nodejs_07.md\":\"ad0e80be\",\"nodejs_08.md\":\"11027bdf\",\"nodejs_09.md\":\"4e4f9b03\",\"nodejs_10.md\":\"c4453555\",\"nodejs_11.md\":\"9f62715b\",\"nodejs_12.md\":\"1229399a\",\"nodejs_13.md\":\"e490f00c\",\"nodejs_14.md\":\"d756be55\",\"nodejs_15.md\":\"eb622fe8\",\"nodejs_16.md\":\"a5beb6c6\",\"sass_01.md\":\"0d150b1a\",\"sass_02.md\":\"8ee85f45\",\"sass_03.md\":\"7c4069d6\",\"sass_04.md\":\"85602152\",\"sass_05.md\":\"b62c38b1\",\"sass_06.md\":\"d02e3012\",\"sass_07.md\":\"edcc3b93\",\"sass_08.md\":\"9c108ef4\",\"sass_09.md\":\"3bdde859\",\"sass_10.md\":\"7eac5fed\",\"sass_11.md\":\"3d1861cf\",\"tailwindcss_01.md\":\"de90a25d\",\"tailwindcss_02.md\":\"bbfd989e\",\"tailwindcss_03.md\":\"dc351bec\",\"tailwindcss_04.md\":\"27601329\",\"test_index.md\":\"57ee7ee1\",\"test_muban.md\":\"5118e1bd\",\"test_zhongqiu.md\":\"3d9111e0\",\"typescript_01.md\":\"27d9f7e0\",\"typescript_02.md\":\"6cf9cb32\",\"typescript_03.md\":\"a851d1d2\",\"typescript_04.md\":\"954cb0d0\",\"typescript_05.md\":\"989bd8d1\",\"typescript_06.md\":\"2c90dcac\",\"vue2_01.md\":\"fd17f4d6\",\"vue2_02.md\":\"84ab761d\",\"vue2_03.md\":\"a64353d4\",\"vue2_04.md\":\"b9b0b23e\",\"vue2_05.md\":\"81a8a08d\",\"vue2_06.md\":\"2ce32e2a\",\"vue2_07.md\":\"19b50842\",\"vue2_08.md\":\"4c8868f5\",\"vue2_09.md\":\"94977e11\",\"vue2_10.md\":\"8e789ccc\",\"vue2_11.md\":\"ee9e7943\",\"vue2_12.md\":\"5249d4c5\",\"vue2_13.md\":\"048d4471\",\"vue2_14.md\":\"63be0ece\",\"vue2_15.md\":\"bd679101\",\"vue2_16.md\":\"bbe6e777\",\"vue3_01.md\":\"27d0d58b\",\"vue3_02.md\":\"22bcb9e5\",\"vue3_03.md\":\"3c52430b\",\"vue3_04.md\":\"0bb848ba\",\"vue3_06.md\":\"1cc04cca\",\"vue3_07.md\":\"28531efb\",\"vue3_08.md\":\"66ee6b02\",\"vue3_09.md\":\"9ea9285a\",\"vue3_10.md\":\"a1d6a99a\",\"vue3_11.md\":\"cb4aa0f5\",\"vue3_12.md\":\"27e13ddf\",\"vue3_13.md\":\"3976cde5\",\"vue3_14.md\":\"1b2e16e7\",\"vue3_15.md\":\"24dc5c2d\",\"vue3_16.md\":\"5efc1ed6\",\"vue3_17.md\":\"ac67e2ed\",\"yuanshen_index.md\":\"437ce691\"}")</script>
    <script type="module" async src="/assets/app.82d46cfc.js"></script>
    
  </body>
</html>